<template>
  <div>
    <van-search
      v-model="search"
      placeholder="请输入快递单号"
      input-align="center"
      @search="onSearch"
      @clear="search=''"
    />
    <div class="content">
      <p v-if="courierInfo&&courierInfo.auto[0]">物流公司：{{courierInfo.auto[0].name}}</p>
      <div>
        <van-empty description="暂无快递信息" v-if="courierInfo.length===0" />
        <van-steps direction="vertical" :step="0" v-else>
          <van-step v-for="(item,index) in courierInfo.data" :key="index">
            <h3>{{item.context}}</h3>
            <p>{{item.ftime}}</p>
          </van-step>
        </van-steps>
      </div>
    </div>
  </div>
</template>
<script>
import {ref,getCurrentInstance} from 'vue'
import { Toast } from 'vant';
export default {
  setup() {
    const search = ref('')
    const step = ref(0)
    const courierInfo = ref('')
    function onSearch(){
      if(!search.value) return
      getCourier(search.value)
    }
    // 获取全局变量得到$axios
    const {proxy} = getCurrentInstance()
    // 快递数据
    // let navList = ref(null)
    function getCourier(search){
      proxy.$axios.get(`/courier?order=${search}`).then(res=>{
        if(res.status==200){
          courierInfo.value = res
        }else{
          Toast.fail(res.data);
        }
      }).catch(err=>{
        console.log(err);
      })
    }
    return{
      search,
      step,
      onSearch,
      courierInfo,
    }
  }
}
</script>
<style lang="less" scoped>
.content{
  padding: var(--van-search-padding);
  // padding-bottom: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}
</style>